<template>
<div class="home">
  <div class="stat">
    <!--用户卡片-->
    <div class="stat-user">
      <div class="stat-user__title">
        scu管理系统
      </div>
      <div class="stat-user__detail">
        <p>欢迎您，{{username}}</p>
        <p>当前时间：{{nowTime}}</p>
      </div>
      <img class="stat-user__portrait" :src="userProfile" alt="">
    </div>
    <!--系统统计数据概览-->
    <div class="stat-info">
      <el-row>
		  <weather />
      </el-row>
    </div>
  </div>
  <el-row :gutter="20" class="margin-t-20 list">
    <!--待办事项-->
    <el-col :span="12">
      <el-card>
        <div slot="header">
          <span><i class="el-icon-tickets margin-r-5"></i>公告</span>
          <el-button icon="el-icon-refresh" circle size="mini" title="刷新" @click="initNotice"></el-button>
        </div>
        <p v-for="(item ,i) in noticeList" :key="i">
          <span>
            <el-tag v-if="item.type == 1" type="success">系统公告</el-tag><el-tag v-else>普通公告</el-tag>
            <span>{{getYMD(item.startTime)}}</span>
            <span>{{item.title}}</span>
          </span>
        </p>
      </el-card>
    </el-col>
    <!--最新消息-->
    <el-col :span="12">
      <el-card>
        <div slot="header">
          <span style="width: 320px;"><i class="el-icon-news margin-r-5"></i>最新科研动态</span>
          <el-button icon="el-icon-refresh" circle size="mini" title="刷新" @click="initScienceDynamic"></el-button>
        </div>
        <p v-for="(item ,i) in scienceDynamicList" :key="i">
          <span class="latest-new-list__time"><i class="el-icon-time margin-r-5"></i>{{getYMD(item.publishTime)}}</span>
          <span>{{item.title}}</span>
        </p>
      </el-card>
    </el-col>
  </el-row>
</div>
</template>

<script>
  import weather from './components/weather.vue'
  import {getNotice} from '@/api/notice'
  import {getScienceDynamic} from '@/api/scienceDynamic'
  export default {
    name: "Home",
    components:{weather},
    data() {
      return {
        username: this.$store.getters['user/getUser'].userName,
        userProfile: this.$store.getters['file/getDownUrl'] + this.$store.getters['user/getUser'].userProfile,
        nowTime: new Date().Format('yyyy-MM-dd hh:mm:ss'),
        noticeList:[],
        scienceDynamicList:[]
      }
    },
    mounted() {
      this.setNowTime();
      this.initNotice();
      this.initScienceDynamic();
    },
    methods: {
      setNowTime() {
        setInterval(() => {
          this.nowTime = new Date().Format('yyyy-MM-dd hh:mm:ss')
        }, 1000);
      },
      initNotice(){
        let _this = this;
        getNotice().then(function (data) {
          if (data.code == 200){
            _this.noticeList = data.data;
          } else{
            _this.$message.error(data.message);
          }
        })
      },
      initScienceDynamic(){
        let _this = this;
        getScienceDynamic().then(function (data) {
          if (data.code == 200){
            _this.scienceDynamicList = data.data;
          } else{
            _this.$message.error(data.message);
          }
        })
      },
      getYMD(dateStr) {
        let d = new Date(dateStr);
        let resDate = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate();
        return resDate;
      }
    }
  }
</script>

<style scoped lang="less">
  .home {
    height: calc(~'100% - 40px');
  }
  .stat {
    display: flex;
    height: 230px;
  }
  .stat-user {
    position: relative;
    width: 300px;
    background-color: @boxBgColor;
    box-shadow: 2px 2px 5px #ccc;
  }
  .stat-user__title {
    height: 100px;
    background-color: @mainColor;
    color: white;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    line-height: 70px;
  }
  .stat-user__detail {
    padding-top: 50px;
    color: #666;
    font-size: 13px;
    text-align: center;
  }
  .stat-user__portrait {
    position: absolute;
    top: 50%;
    left: 50%;
    .circle(80px);
    border: 3px solid white;
    box-shadow: 0 0 5px #ccc;
    margin-top: -55px;
    margin-left: -40px;
  }
  .stat-info {
    flex: 1;
    margin-left: 20px;
  }
  .el-row + .el-row {
    margin-top: 10px;
  }
  .stat-info__item {
    display: flex;
    height: 110px;
    box-shadow: 2px 2px 5px #ccc;
    background-color: @boxBgColor;
  }
  .stat-info__icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80px;
    color: white;
    [class*='el-icon'] {
      font-size: 50px;
    }
  }
  .stat-info__detail {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .stat-info__total {
    color: #0085d0;
    font-size: 27px;
    font-weight: bold;
  }
  .stat-info__title {
    color: #666;
    font-size: 12px;
  }
  .list {
    display: flex;
    height: calc(~'100% - 250px');
    .el-col {
      height: 100%;
    }
  }
  .el-card {
    height: 100%;
    background-color: @boxBgColor;
    .el-icon-plus {
      float: right;
      color: @dangerColor;
      font-weight: bold;
      cursor: pointer;
    }
  }
  .el-card__header span {
    color: @subColor;
  }
  .el-card__body {
    p {
      border-bottom: 1px solid #e5e5e5;
      color: #555;
      font-size: 15px;
      line-height: 30px;
    }
    .active {
      color: #666;
      text-decoration: line-through;
    }
  }
  .latest-new-list__time {
    color: #666;
    font-size: 14px;
  }
</style>
